<template>
    <div>
        <h1>新闻列表</h1>
        <!-- 类似与一级路由的写法，使用 router-link 编写连接，注意 to 加上上一级路由 -->
        <nav>
            <router-link to="/news-list/sports">体育新闻</router-link> |
            <router-link to="/news-list/technology">科技新闻</router-link>
        </nav>
        <router-view class="news-list"></router-view>
    </div>
</template>
<script>
// 引入二级路由组件
import Sports from '@/components/Sports'
import Technology from '@/components/Technology'
export default {
    components: {
        Sports,
        Technology,

    },
}
</script>
<style scoped>
.news-list {
    text-align: left;
    width: 600px;
    height: 150px;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 20px;

}
</style>